<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href='./css/index.css'>
    <link rel="stylesheet" href='./css/index_1.css'>
    <script src="./js/jQuery.min.js"></script>
    <link rel="stylesheet" href="./css/title.css">
</head>

<body>
    <div class="Box">
        <div class="title">
            <div class="logo">
                <img src="./image/index/logo.jpg" alt="">
            </div>
            <div class="my">
                <img src="./image/index/my.jpg" alt="">
                <img src="./image/index/xiazai.jpg" alt="">
            </div>
        </div>
        <div class="title_img">
            <img src="./image/index/banner.png" alt="">
            <input type="text" placeholder="输入小区或商圈名开始找房咯！">
            <img src="./image/index/seach.jpg" alt="" class="seach">
        </div>
        <div class="Seach">
            <div class="Ss">
                <div class="Ss_div">
                    <img src="./image/index/index_03.png" alt="">
                    <p>二手房</p>
                </div>
                <div class="Ss_div">
                    <img src="./image/index/index_05.png" alt="">
                    <p>新房</p>
                </div>
                <div class="Ss_div">
                    <img src="./image/index/index_07.png" alt="">
                    <p>租房</p>
                </div>
                <div class="Ss_div">
                    <img src="./image/index/index_09.png" alt="">
                    <p>卖房</p>
                </div>
            </div>
        </div>
        <div class="body_img">
            <img src="./image/index/banner2.png" alt="">
        </div>
        <div class="fangYuan">
            <p class="p1">热门房源</p>
            <p class="p2">Hot house</p>
        </div>
        <div class="body">
            <div class="box1">
                <div class="box_img"><img src="./image/index/img1.jpg" alt=""></div>
                <div class="content">
                    <p class="p1">文化部中间层 一层带...</p>
                    <p class="p2"><span class="s_left">2室1厅96㎡南北</span><span class="s_right">1105万</span></p>
                    <p class="p3"><span class="s_left">红庙北里</span><span class="s_right">14268元/平</span></p>
                    <p class="p4"><span>学区房</span><span>独家</span></p>
                </div>
            </div>
            <div class="box1">
                <div class="box_img"><img src="./image/index/img2.png" alt=""></div>
                <div class="content">
                    <p class="p1">南水北调世纪大工程...</p>
                    <p class="p2"><span class="s_left">2室1厅96㎡南北</span><span class="s_right">1105万</span></p>
                    <p class="p3"><span class="s_left">红庙北里</span><span class="s_right">14268元/平</span></p>
                    <p class="p4"><span>学区房</span><span>独家</span></p>
                </div>
            </div>
            <div class="box1 bottom">
                <div class="box_img"><img src="./image/index/img3.png" alt=""></div>
                <div class="content">
                    <p class="p1">北斗问天指引回家方...</p>
                    <p class="p2"><span class="s_left">2室1厅96㎡南北</span><span class="s_right">1105万</span></p>
                    <p class="p3"><span class="s_left">红庙北里</span><span class="s_right">14268元/平</span></p>
                    <p class="p4"><span>学区房</span><span>独家</span></p>
                </div>
            </div>
        </div>
        <div class="hot">
            <div class="hot_text">
                <div class="hot_p">
                    <p>热门关注</p>
                </div>
                <div class="hot_p">
                    <p>友情链接</p>
                </div>
            </div>
            <div class="hot_div1">
                <p><span>北京二手房</span><span>北京找房无忧</span></p>
                <p><span>北京二手房价</span><span>青年家园</span></p>
                <p><span>海淀日租房</span><span>免税房源</span></p>
                <p><span>朝阳新房</span><span>满五年唯一免税</span></p>
            </div>
            <div class="hot_div2">
                <p><span>上海二手房</span><span>上海找房无忧</span></p>
                <p><span>上海二手房价</span><span>青年家园</span></p>
                <p><span>陆家嘴日租房</span><span>免税房源</span></p>
                <p><span>虹桥新房</span><span>满十年唯一免税</span></p>
            </div>
            <script>
                var hot_p = $('.hot_text .hot_p')
                var div1 = $('.hot_div1')
                var div2 = $('.hot_div2')
                div2.hide();

                $(hot_p).css('color', '#707076')
                $(hot_p[0]).css('color', '#FF8A00')
                $(hot_p[0]).css('borderBottom', '2px solid #FF8A00')
                $(hot_p).click(function () {
                    $(hot_p).css('color', '#707076')
                    $(hot_p).css('borderBottom', '0px')
                    $(this).css('color', '#FF8A00')
                    $(this).css('borderBottom', '2px solid #FF8A00')
                })
                $(hot_p[0]).click(function () {
                    div1.show();
                    div2.hide();
                })
                $(hot_p[1]).click(function () {
                    div1.hide();
                    div2.show();
                })
            </script>
        </div>
        <div class="Bottom">
            <p class="p1">北京找房无忧 > <a href="index.html">首页</a></p>
            <p class="p2">
                <span>
                    <span class="span"><img src="./image/index/apple.png" alt=""></span>
                    <span class="span1">iPhone <br> 客户端</span>
                </span>
                <span>
                    <span class="span"><img src="./image/index/android.png" alt=""></span>
                    <span class="span1">Android 客户端</span>
                </span>
            </p>
            <p class="p3">北京找房无忧房地产经纪公司</p>
            <p class="p4">网络经营许可证京ICP备20160812号</p>

        </div>
        <div class="Bb">
            <div class="left">
                <img src="./image/index/close.png" class="close" alt="">
                <img src="./image/index/download.png" class="down" alt="">

            </div>
            <div class="center">
                <p class="p1">找房无忧</p>
                <p class="p2">市场行情，一手掌握！</p>
            </div>
            <div class="right">免费下载</div>

            <script>
                var b = $('.close')
                var B = $('.Bb')
                b.click(function () {
                    B.hide();
                })
            </script>
        </div>
    </div>
</body>

</html>